import React from 'react';
import 'url-search-params-polyfill';
import getOption from './utils/option'
import ReactEcharts from 'echarts-for-react';
import './App.css'
import { Row, Col, Button } from 'antd';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      legend: ['legend'],
      data: [12]
    }
  }
  componentDidMount() {

  }

  onEvents = () => {
    return {
      'legendselectchanged': this.onChartLegendselectChanged
    }
  }
  onChartLegendselectChanged = (params) => {
    const echarts_instance = this.echart.getEchartsInstance();
    const option = echarts_instance.getOption();
    const select_value = Object.values(params.selected)
    let n = 0;
    select_value.map(item => {
      if(!item) {
        n++
      }
    });
    if(n===select_value.length) {
      option.legend[0].selected[params.name] = true;
    }
    echarts_instance.setOption(option)
  }
  render (){
    return (
      <div>
        <Row style={{padding: '20px'}}>
          <h3>只保留一个图例</h3>
          <ReactEcharts
            notMerge
            onEvents={this.onEvents()}
            option={getOption(this.state.legend, this.state.data)}
            ref={(e) => this.echart = e}
          />
        </Row>
        <Row style={{padding: '20px'}}>
          <h3>数据过大时，图例被遮挡，tooltip显示滚动条</h3>
          <ReactEcharts
            notMerge
            onEvents={this.onEvents()}
            option={getOption(this.state.legend, this.state.data)}
            ref={(e) => this.echart = e}
          />
        </Row>
      </div>
    );
  }
}

